<!DOCTYPE html>
<html>
<head>
    <title>复杂大屏边框</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .svg-container {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="svg-container">
    12345
</div>
<script>
    const svg = d3.select(".svg-container")
        .append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("viewBox", "0 0 1000 600");

    // 渐变定义
    const defs = svg.append("defs");
    const gradient = defs.append("linearGradient")
        .attr("id", "borderGradient")
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "0%");
    gradient.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "#ff6b6b");
    gradient.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "#4ecdc4");

    // 动态边框
    const border = svg.append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", d3.select(".svg-container").node().clientWidth - 40)
        .attr("height", d3.select(".svg-container").node().clientHeight - 40)
        .attr("fill", "transparent")
        .attr("stroke", "url(#borderGradient)")
        .attr("stroke-width", 4)
        .attr("rx", 10)
        .attr("stroke-dasharray", "10,5"); // 虚线效果

    // 响应式调整
    window.addEventListener("resize", () => {
        const width = d3.select(".svg-container").node().clientWidth;
        const height = d3.select(".svg-container").node().clientHeight;
        border
            .attr("width", width - 40)
            .attr("height", height - 40);
    });

    // 动态动画
    border.transition()
        .duration(2000)
        .attr("stroke-dashoffset", 200)
        .on("end", () => {
            border.attr("stroke-dashoffset", 0);
            border.transition().duration(2000);
        });
</script>
</body>
</html>